<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>角色管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${ctx}/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="${ctx}/systemStatic/style/admin.css">
    <link rel="stylesheet" href="${ctx}/extends/zTree_v3/css/zTreeStyle/zTreeStyle.css"/>
    <link rel="stylesheet" href="${ctx}/iconfont/iconfont.css"/>
    <link rel="stylesheet" href="${ctx}/css/public.css">
    <style>
        .file-id{
            cursor:pointer
        }
    </style>
    <script type="text/javascript">
        var __ctx = "${ctx}";
    </script>
</head>
<body>

<form class="layui-form readViewForm"  lay-filter="readViewForm" style="padding:20px 28px 10px 0;background: #fff" >
    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block">
            <input type="text" readonly="readonly" name="subject" lay-verify="subject" autocomplete="off"  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">发送人</label>
        <div class="layui-input-block">
            <input type="text" readonly="readonly" name="userName" lay-verify="userName" autocomplete="off"  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">发信时间</label>
        <div class="layui-input-block">
            <input type="text" readonly="readonly" name="sendTime" lay-verify="sendTime" autocomplete="off"  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">附件</label>
        <div class="layui-input-block">
            <!--<input type="text" readonly="readonly" name="attachment" lay-verify="attachment" autocomplete="off"   class="layui-input">-->
            <div class="uploadFileList" style="padding-top: 9px;"></div>
            <!--<ul class="uploadFileList"></ul>-->
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">内容:</label>
        <div class="layui-input-block " style="padding:8px 0 0 0">
            <div class="layui-textarea">
                <p id="showContent" style="height: 100px;overflow: auto;"></p>
                <!--<button type="button" class="layui-btn  layui-btn-sm" id="ces" >跳转任务</button>-->
            </div>
        </div>
    </div>
        <input  id="content"type="hidden"  name="content"/>
        <input  type="hidden" name="id" />
</form>
<div id="replyList" style="display:none">
<ul class="layui-tab-title" style="background-color:white" >
    <li class="layui-nav-item  layim-this layui-this"><a id="reply">回复列表</a></li>
</ul>
<div style="overflow-y: auto;overflow-x: hidden;">
    <table id="replyTable" lay-filter="replyTable"></table>
</div>
</div>

<script src="${ctx}/public/component.js" type="text/javascript"></script>
<script src="${ctx}/layui/layui.js"></script>

<script>
    layui.config({
        base: serverPath.systemPath + staticPath.systemPath //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index','layer','commons','setter','form','table','totalFilter','util','jquery'], function() {
        var util = layui.util;   var layer = layui.layer,commons=layui.commons,setter=layui.setter,form=layui.form,table=layui.table, totalFilter = layui.totalFilter,$ = layui.jquery;
        var messageId = '${messageId}';
        $.ajax({
            url: serverPath.systemPath + setter.sysLinkPath +"messageRead/list",
            type: "get",
            contentType: 'application/json',
            dataType: 'json',
            data: {messageId: messageId},
            success: function (data) {
                if (commons._filterRecord(data)) {
                    var returnDate = data.data.messageSend;
                    form.val('readViewForm',{
                        "subject": returnDate.subject,
                        "sendTime":util.toDateString(returnDate.sendTime, "yyyy-MM-dd HH:mm:ss"),
                        "attachment": jsonFile(returnDate.jsonFile) ,
                        "content": returnDate.content ,
                        "id":returnDate.id,
                        "userName":returnDate.userName
                    });
                    //根据是否回复显示或隐藏回复列表
                    var canReply=returnDate.canReply;
                    if(canReply==1){
                        $("#replyList").show();
                    }
                    //显示富文本剪辑器内容
                    var content=$("#content").val();
                    $("#showContent").append(content)
                    var returnDate=data.data.replyList;
                    table.render({
                         elem: '#replyTable'
                        , page: false//开启分页
                        , title: '数据库表信息'
                        , height: '245'
                        ,  data:returnDate
                        , cols: [[ //表头
                            {field:'reply',title:'回复人' , sort:true}
                            ,
                            {field:'content',title:'回复内容' , sort:true}
                            ,
                            {field:'replyTime',title:'回复时间' , sort:true,templet:function(d){
                                    if (d.replyTime == undefined) {
                                        return "";
                                    }else {
                                        return util.toDateString(d.replyTime, "yyyy-MM-dd HH:mm:ss");
                                    }
                                }}

                        ]],
                    });
                    totalFilter.init('replyTable');
                } else {
                    window.parent.layer.alert(data.msg);
                }
            }
        });

        //下载附件
        window.downFile = function (obj){
            var fileId =  $(obj).parents("span").attr("fileId");
            window.location.href = serverPath.formPath + setter.sysLinkPath + "attachFile/download?fileId="+fileId;
        };

        function jsonFile(jsonFile) {
            var files = eval(jsonFile);
            if(files){
                for(var i=0;i<files.length;i++){
//                    var newStr = '<li fileId=' + files[i].fileId + '><p onclick="downFile(this)">' + files[i].fileName+ '</p><i class="layui-icon layui-icon-delete deleteFile" ></i></li>';
                    var newStr = '<span class="file-id" style="margin-right: 20px;" fileId=' + files[i].fileId + '><span href="" onclick="downFile(this)">' + files[i].fileName+ '</span></span>';
                    $('.uploadFileList').append(newStr);
                }
            }
        }

        //监听排序，实现后台排序
        table.on('sort(replyTable)', function(obj){
            table.reload('replyTable', { //testTable是表格容器id
                where: {
                    orderField: obj.field //排序字段
                    ,orderSeq: obj.type //排序方式
                }
            });
        });
        $('#ces').click(function () {
            parent.layer.open({
                type: 2,
                title: "ces",
                area: ['1200px','650px'],
                content: serverPath.workflowPath + setter.workflowLinkPath +"taskOpinion/view/list?runId=" + runId
            });
        })
    })
</script>
<style>
    .layui-layout-body {
        overflow: auto;
    }
</style>
</body>
</html>